<!--
	"image2cpp"
	Original utility by:
	https://jaspervanloenen.com

	This is the 2nd revision of the modified version by:
	https://wiredolphin.net
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>image2cpp</title>

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body{
			font-family: arial;
		}
		.wrapper {
			display: flex;
			flex-direction: column;
			margin: auto;
			width: 900px;
		}
		.section {
			margin: 10px 0;
		}
		.bottom-divider {
			border-bottom: 2px solid #000000;
			padding-bottom: 20px;
		}
		.sub-section {
			clear: both;
			margin-bottom: 1px;
		}
		.section,
		.sub-section {
			width: 100%;
		}
		.column {
			float: left;
		}
		.column-center {
			min-width: 160px;
			text-align: center;
		}
		.column-right {
			float: right;
		}
		.sub-section-title {
			margin: 0 0 10px;
		}
		p {
			margin: 20px 0;
		}
		.table {
			display: table;
			margin: 10px 0 0;
			width: 100%;
		}
		.table-row {
			display: table-row;
			width: 100%;
		}
		.table-cell {
			display: table-cell;
			padding: 5px 0;
		}
		.table-cell:first-child {
			width: 30%;
		}
		.table-cell:last-child {
			width: 70%;
		}
		.table-cell:first-child label {
			font-weight: bold;
		}
		.table-cell:last-child label {
			margin-right: 10px;
		}
		.nested-table {
			margin: 0;
		}
		.nested-table .table-cell {
			color: #666;
			font-size: .9em;
			width: 200px;
		}
		.nested-table .table-cell:first-child {	}

		#format-caption-container div {
			color: #505050;
			display: none;
			font-size: .9em;
			line-height: 1.4em;
			padding: 10px 0 15px;
			width: 100%;
		}
		.byte-input {
			min-height: 160px;
			min-width: 360px;
		}
		.code-output {
			height: 200px;
			width: 100%;
		}
		.note {
			color: #666666;
			font-size: .9em;
			line-height: 1.4em;
			margin: 3px 0;
		}
		button,
		input[type="file"] {
			background: #00CB99;
			border-radius: 3px;
			border: none;
			color: #fff;
			font-size: .9em;
			font-weight: bold;
			margin: 10px 0;
			padding: 4px 8px;
		}
		input[type="file"] {
			font-size: 1.0em;
			padding: 6px 20px;
		}
		.generate-button {
			margin: 40px 0 20px;
		}
		.remove-button {
			margin: 0 0 0 10px;
			padding: 1px 4px;
		}
		.file-info {
			color: #505050;
			font-size: .7em;
			margin-left: 20px;
			max-width: 300px;
			white-space: pre;
		}
		.size-input{
			width: 45px;
		}
		.glyph-input {
			width: 80px;
			margin-left: 10px;
		}
		#image-size-settings {
			list-style-type: none;
		}
		#image-size-settings li {
			margin: 4px 0;
		}
		#images-canvas-container canvas {
			border: 3px solid #88DAC5;
			margin: 10px 15px;
		}
		#images-canvas-container {
			align-items: flex-start;
			display: flex;
			flex-wrap: wrap;
		}
		#extra-settings-container {	}
		#arduino-identifier,
		#adafruit-gfx-settings,
		#all-same-size {
			display: none;
		}
		.msg {
			font-size: 1.2em;
		}
		.error-msg {
			color: #ff0000;
			display: none;
		}
		h1{
			padding: 10px;
			color: white;
			background-color: #00cb99;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<section class="section">
			<h1>image2cpp</h1>
			<p>image2cpp is a simple tool to change images into byte arrays (or your array back into an image) for use with Arduino and (monochrome) displays such as OLEDs.
				It was originally made to work with the Adafruit OLED library. An example sketch for Arduino and this library can be found <a href="https://github.com/javl/image2cpp/blob/master/oled_example/oled_example.ino" target="_blank">here</a>.</p>
			<p>More info (and credits) can be found in the <a href="https://github.com/javl/image2cpp" target="_blank">Github repository</a>. This is also where you can report any <a href="https://github.com/javl/image2cpp/issues" target="_blank">issues</a> you might come across.</p>
			<p>This tool also works offline. Simply save this page to your computer and open the file in your browser.</p>
		</section>
		<section class="section bottom-divider">
			<section class="sub-section">
				<div class="column">
					<h2 class="sub-section-title">1. Select image</h2>
					<input type="file" id="file-input" name="file-input" multiple/><br />
				</div>
				<div class="column column-center">
					<h2 class="sub-section-title">or</h2>
				</div>
				<div class="column column-right">
					<h2 class="sub-section-title">1. Paste byte array</h2>
					<textarea id="byte-input" class="byte-input"></textarea><br />
					<div class="text-input-size">
						<input type="number" min="0" id="text-input-width" class="size-input" value="128" /> x
						<input type="number" min="0" id="text-input-height" class="size-input" value="64" /> px
					</div>
					<button onclick="handleTextInput('horizontal')">Read as horizontal</button>
					<button onclick="handleTextInput('vertical')">Read as vertical</button>
				</div>
			</section>
		</section>
		<section class="section bottom-divider">
			<h2>2. Image Settings</h2>
			<section class="sub-section">
				<div class="table">
					<div class="table-row">
						<div class="table-cell"><label>Canvas size(s): </label></div>
						<div class="table-cell">
							<ul id="image-size-settings"></ul>
							<div id="only-images-file-error" class="msg error-msg">Only images file type are allowed</div>
							<div id="no-file-selected" class="msg">No files selected</div>
							<button id="all-same-size">all same size</button>
						</div>
					</div>
					<div class="table-row">
						<div class="table-cell"><label>Background color:</label></div>
						<div class="table-cell">
							<input id="backgroundColorWhite" type="radio" name="backgroundColor" value="white" checked="checked" onchange="updateRadio('backgroundColor')"/>
							<label for="backgroundColorWhite" class="smallLabel">White</label>
							<input id="backgroundColorBlack" type="radio" name="backgroundColor" value="black" onchange="updateRadio('backgroundColor')"/>
							<label for="backgroundColorBlack" class="smallLabel">Black</label>
							<input id="backgroundColorTransparent" type="radio" name="backgroundColor" value="transparent" onchange="updateRadio('backgroundColor')"/>
							<label for="backgroundColorTransparent" class="smallLabel">Transparent</label>
						</div>
					</div>
					<div class="table-row">
						<div class="table-cell"><label for="invertColors">Invert image colors</label></div>
						<div class="table-cell">
							<input id="invertColors" type="checkbox" onchange="updateBoolean('invertColors')" />
						</div>
					</div>
					<div class="table-row">
						<div class="table-cell"><label>Brightness / alpha threshold: </label></div>
						<div class="table-cell">
							<input id="threshold" class="size-input" type="number" min="0" max="255" name="threshold" oninput="updateInteger('threshold')" value="128"/>
							<div class="note">
								<i>0 - 255; if the brightness of a pixel is above the given level the pixel becomes white, otherwise they become black. When using alpha, opaque and transparent are used instead.</i></div>
						</div>
					</div>
					<div class="table-row">
						<div class="table-cell"><label for="scale">Scaling</label></div>
						<div class="table-cell">
							<select id="scale" name="scale" onchange="updateInteger('scale')">
								<option value="1">original size</option>
								<option value="2">scale to fit, keeping proportions</option>
								<option value="3">stretch to fill canvas</option>
								<option value="4">stretch to fill canvas horizontally</option>
								<option value="5">stretch to fill canvas vertically</option>
							</select>
						</div>
					</div>
					<div class="table-row">
						<div class="table-cell"><label>Center:</label></div>
						<div class="table-cell">
							<input id="centerHorizontally" type="checkbox" onchange="updateBoolean('centerHorizontally')" />
							<label for="centerHorizontally">horizontally</label>
							<input id="centerVertically" type="checkbox" onchange="updateBoolean('centerVertically')" />
							<label for="centerVertically">vertically</label>
						</div>
					</div>
				</div>
				<div class="note">
					<i>Note: centering the image only works when using a canvas larger than the original image.</i>
				</div>
			</section>
		</section>
		<section class="section bottom-divider">
			<h2>3. Preview</h2>
			<section class="sub-section">
				<div id="images-canvas-container"></div>
			</section>
		</section>
		<section class="section">
			<h2>4. Output</h2>
			<section class="sub-section">
				<div class="table">
					<div class="table-row">
						<div class="table-cell"><label for="outputFormat">Code output format</label></div>
						<div class="table-cell">
							<select id="outputFormat" name="outputFormat" onchange="updateOutputFormat(this)">
								<option value="plain">plain bytes</option>
								<option value="arduino">Arduino code</option>
								<option value="arduino_single">Arduino code, single bitmap</option>
								<option value="adafruit_gfx">Adafruit GFXbitmapFont</option>
							</select>
							<div id="format-caption-container">
								<div data-caption="arduino">
									Adds some extra Arduino code around the output for easy copy-paste into
									<a href="https://github.com/javl/image2cpp/blob/master/oled_example/oled_example.ino" target="_blank">this example</a>.
									If multiple images are loaded, generates a byte array for each and appends a counter to the identifier.
								</div>
								<div data-caption="arduino_single">
									Adds some extra Arduino code around the output for easy copy-paste.
									If multiple images are loaded, generates a single byte array.
								</div>
								<div data-caption="adafruit_gfx">
									Creates a <code>GFXbitmapFont</code> formatted ouput. Used by a modified version of the Adafruit GFX library.
									GitHub project and example <a href="https://github.com/wiredolphin/Adafruit-GFX-Library/tree/bitmap-font" target="_blank">here</a>.
									<br />
									<i>First ASCII character</i> value is used only if a glyph identifier of length equal to 1 is not provided for each image. The value itself will be incremented by 1 for each glyph.
								</div>
							</div>
							<div id="extra-settings-container">
								<div id="adafruit-gfx-settings" class="table nested-table">
									<div class="table-row">
										<div class="table-cell"><label>First ASCII character (dec):</label></div>
										<div class="table-cell">
											<input id="first-ascii-char" class="text-input" type="text" name="first-ascii-char" onchange="" value="48"/>
										</div>
									</div>
									<div class="table-row">
										<div class="table-cell"><label>x advance:</label></div>
										<div class="table-cell">
											<input id="x-advance" class="text-input" type="text" name="x-advance" onchange="" value="0"/>
										</div>
									</div>
								</div>
								<div id="arduino-identifier" class="table nested-table">
									<div class="table-row">
										<div class="table-cell"><label>Identifier:</label></div>
										<div class="table-cell">
											<input id="identifier" class="text-input" type="text" name="identifier" onchange="" value="myBitmap"/>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="table-row">
						<div class="table-cell"><label>Draw mode:</label></div>
						<div class="table-cell">
							<select id="drawMode" name="drawMode" onchange="updateDrawMode(this)">
								<option value="horizontal1bit">Horizontal - 1 bit per pixel</option>
								<option value="vertical1bit">Vertical - 1 bit per pixel</option>
								<option value="horizontal565">Horizontal - 2 bytes per pixel (565)</option>
								<option value="horizontalAlpha">Horizontal - 1 bit per pixel alpha map</option>
								<option value="horizontal888">Horizontal - 3 bytes per pixel (rgb888</option>
							</select>
						</div>
					</div>
				</div>
				<div id="note1bit">
					<div class="note">
						<i>If your image looks all messed up on your display, like the image below, try using a different mode.</i>
					</div>
					<img class="inlineImg"
						src=""
					width="150" height="64" alt="" />
				</div>
			</section>
			<section class="sub-section">
				<button type="button" class="generate-button" onclick="outputString()">Generate code</button>
				<textarea id="code-output" class="code-output"></textarea>
			</section>
		</section>
	</div>


	<script type="text/javascript">	
		var ConversionFunctions = {
			// Output the image as a string for horizontally drawing displays
			horizontal1bit: function (data, canvasWidth, canvasHeight){
				var output_string = "";
				var output_index = 0;

				var byteIndex = 7;
				var number = 0;

				// format is RGBA, so move 4 steps per pixel
				for(var index = 0; index < data.length; index += 4){
					// Get the average of the RGB (we ignore A)
					var avg = (data[index] + data[index + 1] + data[index + 2]) / 3;
					if(avg > settings["threshold"]){
						number += Math.pow(2, byteIndex);
					}
					byteIndex--;

					// if this was the last pixel of a row or the last pixel of the
					// image, fill up the rest of our byte with zeros so it always contains 8 bits
					if ((index != 0 && (((index/4)+1)%(canvasWidth)) == 0 ) || (index == data.length-4)) {
						// for(var i=byteIndex;i>-1;i--){
							// number += Math.pow(2, i);
						// }
						byteIndex = -1;
					}

					// When we have the complete 8 bits, combine them into a hex value
					if(byteIndex < 0){
						var byteSet = number.toString(16);
						if(byteSet.length == 1){ byteSet = "0"+byteSet; }
						var b = "0x"+byteSet;
						output_string += b + ", ";
						output_index++;
						if(output_index >= 16){
							output_string += "\n";
							output_index = 0;
						}
						number = 0;
						byteIndex = 7;
					}
				}
				return output_string;
			},


			// Output the image as a string for vertically drawing displays
			vertical1bit: function (data, canvasWidth, canvasHeight){
				var output_string = "";
				var output_index = 0;

				for(var p=0; p < Math.ceil(settings["screenHeight"] / 8); p++){
					for(var x = 0; x < settings["screenWidth"]; x++){
						var byteIndex = 7;
						var number = 0;

						for (var y = 7; y >= 0; y--){
							var index = ((p*8)+y)*(settings["screenWidth"]*4)+x*4;
							var avg = (data[index] + data[index +1] + data[index +2]) / 3;
							if (avg > settings["threshold"]){
								number += Math.pow(2, byteIndex);
							}
							byteIndex--;
						}
						var byteSet = number.toString(16);
						if (byteSet.length == 1){ byteSet = "0"+byteSet; }
						var b = "0x"+byteSet.toString(16);
						output_string += b + ", ";
						output_index++;
						if(output_index >= 16){
							output_string += "\n";
							output_index = 0;
						}
					}
				}
				return output_string;
			},

			// Output the image as a string for 565 displays (horizontally)
			horizontal565: function (data, canvasWidth, canvasHeight){
				var output_string = "";
				var output_index = 0;

				// format is RGBA, so move 4 steps per pixel
				for(var index = 0; index < data.length; index += 4){
					// Get the RGB values
					var r = data[index];
					var g = data[index + 1];
					var b = data[index + 2];
					// calculate the 565 color value
					var rgb = ((r & 0b11111000) << 8) | ((g & 0b11111100) << 3) | ((b & 0b11111000) >> 3);
					// Split up the color value in two bytes
					var firstByte = (rgb >> 8) & 0xff;
					var secondByte = rgb & 0xff;

					var byteSet = rgb.toString(16);
					while(byteSet.length < 4){ byteSet = "0" + byteSet; }
					output_string += "0x" + byteSet + ", ";

					// add newlines every 16 bytes
					output_index++;
					if(output_index >= 16){
						output_string += "\n";
						output_index = 0;
					}
				}
				return output_string;
			},
			// Output the image as a string for rgb888 displays (horizontally)
			horizontal888: function (data, canvasWidth, canvasHeight){
				var output_string = "";
				var output_index = 0;

				// format is RGBA, so move 4 steps per pixel
				for(var index = 0; index < data.length; index += 4){
					// Get the RGB values
					var r = data[index];
					var g = data[index + 1];
					var b = data[index + 2];
					// calculate the 565 color value
					var rgb = (r << 16) | (g << 8) | (b);
					// Split up the color value in two bytes
					var firstByte = (rgb >> 8) & 0xff;
					var secondByte = rgb & 0xff;

					var byteSet = rgb.toString(16);
					while(byteSet.length < 8){ byteSet = "0" + byteSet; }
					output_string += "0x" + byteSet + ", ";

					// add newlines every 16 bytes
					output_index++;
					if(output_index >= canvasWidth){
						output_string += "\n";
						output_index = 0;
					}
				}
				return output_string;
			},
			// Output the alpha mask as a string for horizontally drawing displays
			horizontalAlpha: function (data, canvasWidth, canvasHeight){
				var output_string = "";
				var output_index = 0;

				var byteIndex = 7;
				var number = 0;

				// format is RGBA, so move 4 steps per pixel
				for(var index = 0; index < data.length; index += 4){
					// Get alpha part of the image data
					var alpha = data[index + 3];
					if(alpha > settings["threshold"]){
						number += Math.pow(2, byteIndex);
					}
					byteIndex--;

					// if this was the last pixel of a row or the last pixel of the
					// image, fill up the rest of our byte with zeros so it always contains 8 bits
					if ((index != 0 && (((index/4)+1)%(canvasWidth)) == 0 ) || (index == data.length-4)) {
						byteIndex = -1;
					}

					// When we have the complete 8 bits, combine them into a hex value
					if(byteIndex < 0){
						var byteSet = number.toString(16);
						if(byteSet.length == 1){ byteSet = "0"+byteSet; }
						var b = "0x"+byteSet;
						output_string += b + ", ";
						output_index++;
						if(output_index >= 16){
							output_string += "\n";
							output_index = 0;
						}
						number = 0;
						byteIndex = 7;
					}
				}
				return output_string;
			}
		};

		// An images collection with helper methods
		function Images() {
			var collection = [];
			this.push = function(img, canvas, glyph) {
				collection.push({ "img" : img, "canvas" : canvas, "glyph" : glyph });
			};
			this.remove = function(image) {
				var i = collection.indexOf(image);
				if(i != -1) collection.splice(i, 1);
			};
			this.each = function(f) { collection.forEach(f); };
			this.length = function() { return collection.length; };
			this.first = function() { return collection[0]; };
			this.last = function() { return collection[collection.length - 1]; };
			this.getByIndex = function(index) { return collection[index]; };
			this.setByIndex = function(index, img) { collection[index] = img; };
			this.get = function(img) {
				if(img) {
					for(var i = 0; i < collection.length; i++) {
						if(collection[i].img == img) {
							return collection[i];
						}
					}
				}
				return collection;
			};
			return this;
		}

		// Add events to the file input button
		var fileInput = document.getElementById("file-input");
		fileInput.addEventListener("click", function(){this.value = null;}, false);
		fileInput.addEventListener("change", handleImageSelection, false);

		// Filetypes accepted by the file picker
		var fileTypes = ["jpg", "jpeg", "png", "bmp", "gif", "svg"];

		// The canvas we will draw on
		var canvasContainer = document.getElementById("images-canvas-container");
		// multiple images settings container
		var imageSizeSettings = document.getElementById("image-size-settings");
		// all images same size button
		var allSameSizeButton = document.getElementById("all-same-size");
		// error message
		var onlyImagesFileError = document.getElementById("only-images-file-error");
		// initial message
		var noFileSelected = document.getElementById("no-file-selected");

		// The variable to hold our images. Global so we can easily reuse it when the
		// user updates the settings (change canvas size, scale, invert, etc)
		var images = new Images();

		// A bunch of settings used when converting
		var settings = {
			screenWidth: 128,
			screenHeight: 64,
			scaleToFit: true,
			preserveRatio: true,
			centerHorizontally: false,
			centerVertically: false,
			backgroundColor: "white",
			scale: "1",
			drawMode: "horizontal",
			threshold: 128,
			outputFormat: "plain",
			invertColors: false,
			conversionFunction: ConversionFunctions.horizontal1bit
		};

		// Variable name, when "arduino code" is required
		var identifier = "myBitmap";

		function update() {
			images.each(function(image) { place_image(image); });
		}

		// Easy way to update settings controlled by a textfield
		function updateInteger(fieldName){
			settings[fieldName] = document.getElementById(fieldName).value;
			update();
		}

		// Easy way to update settings controlled by a checkbox
		function updateBoolean(fieldName){
			settings[fieldName] = document.getElementById(fieldName).checked;
			update();
		}

		// Easy way to update settings controlled by a radiobutton
		function updateRadio(fieldName){
			var radioGroup = document.getElementsByName(fieldName);
			for (var i = 0; i < radioGroup.length; i++) {
				if (radioGroup[i].checked) {
					settings[fieldName] = radioGroup[i].value;
				}
			}
			update();
		}

		// Updates Arduino code check-box
		function updateOutputFormat(elm) {

			var caption = document.getElementById("format-caption-container");
			var adafruitGfx = document.getElementById("adafruit-gfx-settings");
			var arduino = document.getElementById("arduino-identifier");

			for(var i = 0; i < caption.children.length; i++) {
				caption.children[i].style.display = "none";
			}
			caption = document.querySelector("div[data-caption='" + elm.value + "']");
			if(caption) caption.style.display = "block";

			elm.value != "plain" ? arduino.style.display = "block" : arduino.style.display = "none";
			elm.value == "adafruit_gfx" ? adafruitGfx.style.display = "block" : adafruitGfx.style.display = "none";

			settings["outputFormat"] = elm.value;
		}

		function updateDrawMode(elm) {
			var note = document.getElementById("note1bit");
			if(elm.value == "horizontal1bit" || elm.value == "vertical1bit") {
				note.style.display = "block";
			} else {
				note.style.display = "none";
			}

			var conversionFunction = ConversionFunctions[elm.value];
			if(conversionFunction) {
				settings.conversionFunction = conversionFunction;
			}
		}

		function updateDrawMode(elm) {
			var note = document.getElementById("note1bit");
			if(elm.value == "horizontal1bit" || elm.value == "vertical1bit") {
				note.style.display = "block";
			} else {
				note.style.display = "none";
			}

			var conversionFunction = ConversionFunctions[elm.value];
			if(conversionFunction) {
				settings.conversionFunction = conversionFunction;
			}
		}

		// Make the canvas black and white
		function blackAndWhite(canvas, ctx){
			var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
			var data = imageData.data;
			for (var i = 0; i < data.length; i += 4) {
				var avg = (data[i] + data[i +1] + data[i +2]) / 3;
				avg > settings["threshold"] ? avg = 255 : avg = 0;
				data[i]     = avg; // red
				data[i + 1] = avg; // green
				data[i + 2] = avg; // blue
			}
			ctx.putImageData(imageData, 0, 0);
		}


		// Invert the colors of the canvas
		function invert(canvas, ctx) {
			var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
			var data = imageData.data;
			for (var i = 0; i < data.length; i += 4) {
				data[i]     = 255 - data[i];     // red
				data[i + 1] = 255 - data[i + 1]; // green
				data[i + 2] = 255 - data[i + 2]; // blue
			}
			ctx.putImageData(imageData, 0, 0);
		}

		// Draw the image onto the canvas, taking into account color and scaling
		function place_image(image){

			var img = image.img;
			var canvas = image.canvas;
			var ctx = canvas.getContext("2d");
			image.ctx = ctx;

			// Make sure we're using the right canvas size
			//canvas.width = settings["screenWidth"];
			//canvas.height = settings["screenHeight"];

			// Invert background if needed
			if (settings["backgroundColor"] == "transparent") {
				ctx.fillStyle = "rgba(0,0,0,0.0)";
				ctx.globalCompositeOperation = 'copy';
			} else {
				if (settings["invertColors"]){
					settings["backgroundColor"] == "white" ? ctx.fillStyle = "black" : ctx.fillStyle = "white";
				} else {
					ctx.fillStyle = settings["backgroundColor"];
				}
				ctx.globalCompositeOperation = 'source-over';
			}
			ctx.fillRect(0, 0, canvas.width, canvas.height);

			// Offset used for centering the image when requested
			var offset_x = 0;
			var offset_y = 0;

			switch(settings["scale"]){
				case "1": // Original
					if(settings["centerHorizontally"]){ offset_x = Math.round((canvas.width - img.width) / 2); }
					if(settings["centerVertically"]){ offset_y = Math.round((canvas.height - img.height) / 2); }
					ctx.drawImage(img, 0, 0, img.width, img.height,
						offset_x, offset_y, img.width, img.height);
				break;
				case "2": // Fit (make as large as possible without changing ratio)
					var horRatio = canvas.width / img.width;
					var verRatio =  canvas.height / img.height;
					var useRatio  = Math.min(horRatio, verRatio);

					if(settings["centerHorizontally"]){ offset_x = Math.round((canvas.width - img.width*useRatio) / 2); }
					if(settings["centerVertically"]){ offset_y = Math.round((canvas.height - img.height*useRatio) / 2); }
					ctx.drawImage(img, 0, 0, img.width, img.height,
						offset_x, offset_y, img.width * useRatio, img.height * useRatio);
				break;
				case "3": // Stretch x+y (make as large as possible without keeping ratio)
					ctx.drawImage(img, 0, 0, img.width, img.height,
						offset_x, offset_y, canvas.width, canvas.height);
				break;
				case "4": // Stretch x (make as wide as possible)
					offset_x = 0;
					if(settings["centerVertically"]){ Math.round(offset_y = (canvas.height - img.height) / 2); }
					ctx.drawImage(img, 0, 0, img.width, img.height,
						offset_x, offset_y, canvas.width, img.height);
				break;
				case "5": // Stretch y (make as tall as possible)
					if(settings["centerHorizontally"]){ offset_x = Math.round((canvas.width - img.width) / 2); }
					offset_y = 0;
					ctx.drawImage(img, 0, 0, img.width, img.height,
						offset_x, offset_y, img.width, canvas.height);
				break;
			}
			// Make sure the image is black and white
			if(settings.conversionFunction == ConversionFunctions.horizontal1bit
				|| settings.conversionFunction == ConversionFunctions.vertical1bit) {
				blackAndWhite(canvas, ctx);
				if(settings["invertColors"]){
					invert(canvas, ctx);
				}
			}
		}


		// Handle inserting an image by pasting code
		function handleTextInput(drawMode){

			var canvas = document.createElement("canvas");
			canvas.width = parseInt(document.getElementById("text-input-width").value);
			canvas.height = parseInt(document.getElementById("text-input-height").value);
			settings["screenWidth"] = canvas.width;
			settings["screenHeight"] = canvas.height;

			if(canvasContainer.children.length) {
				canvasContainer.removeChild(canvasContainer.firstChild);
			}
			canvasContainer.appendChild(canvas);

			var image = new Image();
			images.setByIndex(0, {"img": image, "canvas" : canvas});

			var input = document.getElementById("byte-input").value;

			// Remove Arduino code
			input = input.replace(/const unsigned char myBitmap \[\] PROGMEM = \{/g, "");
			input = input.replace(/\};/g, "");

			// Convert newlines to comma (helps to remove comments later)
			input = input.replace(/\r\n|\r|\n/g, ",");
			// Convert multiple commas in a row into a single one
			input = input.replace(/,{2,}/g, ",");
			// Remove whitespace
			input = input.replace(/\s/g, "");
			//Remove comments
			input = input.replace(/\/\/(.+?),/g, "");
			// Remove "0x"
			input = input.replace(/0x/g, "");
			// Split into list
			var list = input.split(",");
			console.log(list);

			if(drawMode == "horizontal"){
				listToImageHorizontal(list, canvas);
			}else{
				listToImageVertical(list, canvas);
			}
		}


		function allSameSize(images, files) {
			if(images.length() > 1 && images.length() == files.length) {
				var inputs = imageSizeSettings.querySelectorAll("input");
				allSameSizeButton.onclick = function() {
					for(var i = 2; i < inputs.length; i++) {
						if(inputs[i].name == "width") {
							inputs[i].value = inputs[0].value;
							inputs[i].oninput();
						}
						if(inputs[i].name == "height") {
							inputs[i].value = inputs[1].value;
							inputs[i].oninput();
						}

					}
				};
				allSameSizeButton.style.display = "block";
			}
		}

		// Handle selecting an image with the file picker
		function handleImageSelection(evt){

			var files = evt.target.files;
			onlyImagesFileError.style.display = "none";

			files.length > 0 ?
				noFileSelected.style.display = "none" :
					noFileSelected.style.display = "block";

			for (var i = 0, f; f = files[i]; i++) {

				// Only process image files.
				if(!f.type.match("image.*")) {
				onlyImagesFileError.style.display = "block";
					continue;
				}

				var reader = new FileReader();

				reader.onload = (function(file) {
					return function(e) {
						// Render thumbnail.
						var img = new Image();

						img.onload = function(){

							var canvas = document.createElement("canvas");

							var imageEntry = document.createElement("li");
							imageEntry.setAttribute("data-img", file.name);

							var w = document.createElement("input");
							w.type = "number";
							w.name = "width";
							w.id = "screenWidth";
							w.min = 0;
							w.className = "size-input";
							w.value = img.width;
							settings["screenWidth"] = img.width;
							w.oninput = function() { canvas.width = this.value; update(); updateInteger('screenWidth'); };

							var h = document.createElement("input");
							h.type = "number";
							h.name = "height";
							h.id = "screenHeight";
							h.min = 0;
							h.className = "size-input";
							h.value = img.height;
							settings["screenHeight"] = img.height;
							h.oninput = function() { canvas.height = this.value; update(); updateInteger('screenHeight'); };

							var gil = document.createElement("span");
							gil.innerHTML = "glyph";
							gil.className = "file-info";

							var gi = document.createElement("input");
							gi.type = "text";
							gi.name = "glyph";
							gi.className = "glyph-input";
							gi.onchange = function() {
								var image = images.get(img);
								image.glyph = gi.value;
							};

							var fn = document.createElement("span");
							fn.className = "file-info";
							fn.innerHTML = file.name + "  (file resolution: " + img.width + " x " + img.height + ")";
							fn.innerHTML += "<br />";

							var rb = document.createElement("button");
							rb.className = "remove-button";
							rb.innerHTML = "remove";
							rb.onclick = function() {
								var image = images.get(img);
								canvasContainer.removeChild(image.canvas);
								images.remove(image);
								imageSizeSettings.removeChild(imageEntry);
								if(imageSizeSettings.children.length == 1) {
									allSameSizeButton.style.display = "none";
								}
								if(images.length() == 0) noFileSelected.style.display = "block";
								update();
							};

							imageEntry.appendChild(fn);
							imageEntry.appendChild(w);
							imageEntry.appendChild(document.createTextNode(" x "));
							imageEntry.appendChild(h);
							imageEntry.appendChild(gil);
							imageEntry.appendChild(gi);
							imageEntry.appendChild(rb);

							imageSizeSettings.appendChild(imageEntry);

							canvas.width = img.width;
							canvas.height = img.height;
							canvasContainer.appendChild(canvas);

							images.push(img, canvas, file.name.split(".")[0]);
							place_image(images.last());
							allSameSize(images, files);
						};
						img.src = e.target.result;
					};
				})(f);
				reader.readAsDataURL(f);
			}
		}

		function imageToString(image){
			// extract raw image data
			var ctx = image.ctx;
			var canvas = image.canvas;

			var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
			var data = imageData.data;
			return settings.conversionFunction(data, canvas.width, canvas.height);
		}

		// Get the custom arduino output variable name, if any
		function getIdentifier() {
			var vn = document.getElementById("identifier");
			return vn && vn.value.length ? vn.value : identifier;
		}


		// Output the image string to the textfield
		function outputString(){

			var output_string = "", count = 1;
			var code = "";

			switch(settings["outputFormat"]) {

				case "arduino": {

					images.each(function(image) {
						code = imageToString(image);

						// Trim whitespace from end and remove trailing comma
						code = code.replace(/,\s*$/,"");

						code = "\t" + code.split("\n").join("\n\t") + "\n";
						var variableCount = images.length() > 1 ? count++ : "";
						var comment = "// '" + image.glyph + "', "+image.canvas.width+"x"+image.canvas.height+"px\n";

						code = comment + "const " + getType() + " " +
								getIdentifier() +
								variableCount +
								" [] PROGMEM = {" +
								"\n" + code + "};\n";

						output_string += code;
					});
					break;
				}

				case "arduino_single": {
					var comment = "";
					images.each(function(image) {
						code = imageToString(image);
						code = "\t" + code.split("\n").join("\n\t") + "\n";
						comment = "\t// '" + image.glyph + ", " + image.canvas.width+"x"+image.canvas.height+"px\n";
						output_string += comment + code;
					});

					output_string = output_string.replace(/,\s*$/,"");

					output_string = "const " + getType() + " " +
						+ getIdentifier()
						+ " [] PROGMEM = {"
						+ "\n" + output_string + "\n};";
					break;
				}

				case "adafruit_gfx": { // bitmap
					var comment = "";
					var useGlyphs = 0;
					images.each(function(image) {
						code = imageToString(image);
						code = "\t" + code.split("\n").join("\n\t") + "\n";
						comment = "\t// '" + image.glyph + ", " + image.canvas.width+"x"+image.canvas.height+"px\n";
						output_string += comment + code;
						if(image.glyph.length == 1) useGlyphs++;
					});

					output_string = output_string.replace(/,\s*$/,"");
					output_string = "const unsigned char "
						+ getIdentifier()
						+ "Bitmap"
						+ " [] PROGMEM = {"
						+ "\n" + output_string + "\n};\n\n"
						+ "const GFXbitmapGlyph "
						+ getIdentifier()
						+ "Glyphs [] PROGMEM = {\n";

					var firstAschiiChar = document.getElementById("first-ascii-char").value;
					var xAdvance = parseInt(document.getElementById("x-advance").value);
					var offset = 0;
					code = "";

					// GFXbitmapGlyph
					images.each(function(image) {
						code += "\t{ "
							+ offset + ", "
							+ image.canvas.width + ", "
							+ image.canvas.height + ", "
							+ xAdvance + ", "
							+ "'" + (images.length() == useGlyphs ?
								image.glyph :
									String.fromCharCode(firstAschiiChar++)) + "'"
							+ " }";
						if(image != images.last()){ code += ","; }
						code += "// '" + image.glyph + "'\n";
						offset += image.canvas.width;
					});
					code += "};\n";
					output_string += code;

					// GFXbitmapFont
					output_string += "\nconst GFXbitmapFont "
						+ getIdentifier()
						+ "Font PROGMEM = {\n"
						+ "\t(uint8_t *)"
						+ getIdentifier() + "Bitmap,\n"
						+ "\t(GFXbitmapGlyph *)"
						+ getIdentifier()
						+ "Glyphs,\n"
						+ "\t" + images.length()
						+ "\n};\n";
					break;
				}
				default: { // plain
					images.each(function(image) {
						code = imageToString(image);
						var comment = image.glyph ? ("// '" + image.glyph + "', " + image.canvas.width+"x"+image.canvas.height+"px\n") : "";
						if(image.img != images.first().img) comment = "\n" + comment;
						code = comment + code;
						output_string += code;
					});
					// Trim whitespace from end and remove trailing comma
					output_string = output_string.replace(/,\s*$/g,"");
				}
			}

			document.getElementById("code-output").value = output_string;
		}

		// Use the horizontally oriented list to draw the image
		function listToImageHorizontal(list, canvas){

			var ctx = canvas.getContext("2d");
			ctx.clearRect(0, 0, canvas.width, canvas.height);

			var imgData = ctx.createImageData(canvas.width, canvas.height);

			var index = 0;

			var page = 0;
			var x = 0;
			var y = 7;
			// round the width up to the next byte
			var widthRoundedUp = Math.floor(canvas.width / 8 + (canvas.width % 8 ? 1 : 0)) * 8;
			var widthCounter = 0;

			// Move the list into the imageData object
			for (var i=0;i<list.length;i++){

				var binString = hexToBinary(list[i]);
				if(!binString.valid){
					alert("Something went wrong converting the string. Did you forget to remove any comments from the input?");
					console.log("invalid hexToBinary: ", binString.s);
					return;
				}
				binString = binString.result;
				if (binString.length == 4){
					binString = binString + "0000";
				}

				// Check if pixel is white or black
				for(var k=0; k<binString.length; k++, widthCounter++){
					// if we've counted enough bits, reset counter for next line
					if(widthCounter >= widthRoundedUp) {
						widthCounter = 0;
					}
					// skip 'artifact' pixels due to rounding up to a byte
					if(widthCounter >= canvas.width) {
						continue;
					}
					var color = 0;
					if(binString.charAt(k) == "1"){
						color = 255;
					}
					imgData.data[index] = color;
					imgData.data[index+1] = color;
					imgData.data[index+2] = color;
					imgData.data[index+3] = 255;

					index += 4;
				}
			}

			// Draw the image onto the canvas, then save the canvas contents
			// inside the img object. This way we can reuse the img object when
			// we want to scale / invert, etc.
			ctx.putImageData(imgData, 0, 0);
			var img = new Image();
			img.src = canvas.toDataURL("image/png");
			images.first().img = img;
		}


		// Use the vertically oriented list to draw the image
		function listToImageVertical(list, canvas){

			var ctx = canvas.getContext("2d");
			ctx.clearRect(0, 0, canvas.width, canvas.height);

			var index = 0;

			var page = 0;
			var x = 0;
			var y = 7;

			// Move the list into the imageData object
			for (var i=0;i<list.length;i++){

				var binString = hexToBinary(list[i]);
				if(!binString.valid){
					alert("Something went wrong converting the string. Did you forget to remove any comments from the input?");
					console.log("invalid hexToBinary: ", binString.s);
					return;
				}
				binString = binString.result;
				if (binString.length == 4){
					binString = binString + "0000";
				}

				// Check if pixel is white or black
				for(var k=0; k<binString.length; k++){
					var color = 0;
					if(binString.charAt(k) == "1"){
						color = 255;
					}
					drawPixel(ctx, x, (page*8)+y, color);
					y--;
					if(y < 0){
						y = 7;
						x++;
						if(x >= settings["screenWidth"]){
							x = 0;
							page++;
						}
					 }

				}
			}
			// Save the canvas contents inside the img object. This way we can
			// reuse the img object when we want to scale / invert, etc.
			var img = new Image();
			img.src = canvas.toDataURL("image/png");
			images.first().img = img;
		}


		// Convert hex to binary
		function hexToBinary(s) {

			var i, k, part, ret = "";
			// lookup table for easier conversion. "0" characters are
			// padded for "1" to "7"
			var lookupTable = {
				"0": "0000", "1": "0001", "2": "0010", "3": "0011", "4": "0100",
				"5": "0101", "6": "0110", "7": "0111", "8": "1000", "9": "1001",
				"a": "1010", "b": "1011", "c": "1100", "d": "1101", "e": "1110",
				"f": "1111", "A": "1010", "B": "1011", "C": "1100", "D": "1101",
				"E": "1110", "F": "1111"
			};
			for (i = 0; i < s.length; i += 1) {
				if (lookupTable.hasOwnProperty(s[i])) {
					ret += lookupTable[s[i]];
				} else {
					return { valid: false, s: s };
				}
			}
			return { valid: true, result: ret };
		}


		// Quick and effective way to draw single pixels onto the canvas
		// using a global 1x1px large canvas
		function drawPixel(ctx, x, y, color) {
			var single_pixel = ctx.createImageData(1,1);
			var d = single_pixel.data;

			d[0] = color;
			d[1] = color;
			d[2] = color;
			d[3] = 255;
			ctx.putImageData(single_pixel, x, y);
		}
		// get the type (in arduino code) of the output image
		// this is a bit of a hack, it's better to make this a property of the conversion function (should probably turn it into objects)
		function getType() {
			if (settings.conversionFunction == ConversionFunctions.horizontal565) {
				return "uint16_t";
			}else if(settings.conversionFunction == ConversionFunctions.horizontal888){
				return "unsigned long";
			}else{
				return "unsigned char";
			}
		}
	</script>
</body>
</html>
